<template>
	<view class="content">
		<uni-swiper-dot
		 :info="info" 
		 :current="current" 
		 :mode="mode" 
		 :dots-styles="dotsStyles" 
		 field="content">
			<swiper
			  interval="2500" 
			  :autoplay="true"
			  class="swiper-box"
			   @change="change">
				<swiper-item v-for="(item, index) in info" :key="index">
					<view :class="item.colorClass" class="swiper-item">
						<image 
							class="image" 
							:src="item.url" 
							mode="aspectFill" />
					</view>
				</swiper-item>
			</swiper>
		</uni-swiper-dot> 
		
		<view class="uni-list">
			<view class="glance-product-list-title">推荐课程</view>
			<view class="media-item-line" style="position: absolute;"></view>
			<view 
			  class="uni-list-cell"
			  hover-class="uni-list-cell-hover"
			  v-for="(course, index) in courseList" 
			  :key="index"
			   @click="goDetail(course)">
				<view class="uni-media-list">
					<image 
					  class="uni-media-list-logo"
					  src="https://img.36krcdn.com/20200410/v2_9c3331af67e64994aa97a27fffb1a380_img_png?x-oss-process=image/resize,m_mfit,w_520,h_300/crop,w_520,h_300,g_center">
					 </image>
					<view class="uni-media-list-body">
						<view class="uni-media-list-text-top">
						  {{ course.name }}
						</view>
						<view class="uni-media-list-text-bottom">
							<text>{{ course.studyNumber }}人学习</text>
							<!-- <text>{{ value.published_at }}</text> -->
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<uni-load-more :status="status"  :icon-size="16" :content-text="contentText" />
	</view>
</template>

<script>
	import uniSwiperDot from '@/components/uni-swiper-dot/uni-swiper-dot.vue'
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
	import { mapGetters, mapState } from 'vuex'
	export default {
		components: {
			uniSwiperDot,
			uniLoadMore
		},
		data() {
			return {
				currentPage: 1,
				pageSize: 4,
				status: 'loading',
				contentText: {
					contentdown: '上拉加载更多',
					contentrefresh: '数据加载中',
					contentnomore: '亲, 没有更多数据啦'
				},
				loadingFirst: false, // 是否上拉刷新列表
				title: '推荐课程',
				current: 0,
				mode: 'dot',
				dotsStyles: {},
				info: [{
						//colorClass: 'uni-bg-red',
						url: 'https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/shuijiao.jpg',
						content: '内容 A'
					},
					{
						//colorClass: 'uni-bg-green',
						url: 'https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/muwu.jpg',
						content: '内容 B'
					},
					{
						//colorClass: 'uni-bg-blue',
						url: 'https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/cbd.jpg',
						content: '内容 C'
					}
				],
				courseList: []
			}
		},
		
		computed: {
		   ...mapGetters({
		        host: 'common/host'
		   })
		},
		
		onLoad() {
			console.log('发起请求' + this.$httpApi)
		   this.getRecommendCourseList()
		},
		
		onPullDownRefresh() {
			this.loadingFirst = true
		    this.getRecommendCourseList()   
		},
		
		onReachBottom() {
			this.currentPage++
			this.getRecommendCourseList()
		},
			
		methods: {
			
			goDetail () {
				uni.navigateTo({
					url: '../course/course-detail'
				})
			},
			
			// 获取推荐课程列表
			getRecommendCourseList() {
				let params = {
					pageNumber: this.currentPage, 
					pageSize: this.pageSize
				}
				this.$httpApi.get('/student/courseInfo', params)
				.then(res => {
					let result = res.data
					if (result.dataList.length === 0
					|| result.dataList.length < this.pageSize) {
						this.status = 'noMore'
					}
					if (this.loadingFirst) {
						this.courseList = []
						setTimeout(() => {
							this.courseList = result.dataList
							this.loadingFirst = false
							uni.stopPullDownRefresh()
						}, 800)
					} else {
						this.courseList = this.courseList.concat(result.dataList)
					}
				})
			},
			
            change(e) {
				this.current = e.detail.current
			},
			
			// 课程学习
			studyCourse () {
				
			}
		}
	}
</script>

<style>
	/* 头条小程序组件内不能引入字体 */
	/* #ifdef MP-TOUTIAO */
	@font-face {
		font-family: uniicons;
		font-weight: normal;
		font-style: normal;
		src: url('~@/static/uni.ttf') format('truetype');
	}
	
	/* #endif */
	
	/* #ifndef APP-NVUE */
	page {
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		background-color: #efeff4;
		min-height: 100%;
		height: auto;
	}
	
	view {
		font-size: 14px;
		line-height: inherit;
	}
	
	
	.media-item-line {
		position: absolute;
		left: 30rpx;
		right: 30rpx;
		bottom: 0;
		height: 1rpx;
		background-color: #ebebeb;
	}
	
	.glance-product-list-title{
		border-bottom: 2rpx solid #d0d0d0;
		height: 50px;
		font-size: 20px;
		line-height:50px; 
		text-align: center;
	}
	/* #endif */
	
	.word-btn-white {
		font-size: 18px;
		color: #FFFFFF;
	}
	
	.word-btn {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		align-items: center;
		justify-content: center;
		border-radius: 6px;
		height: 48px;
		margin: 15px;
		background-color: #007AFF;
	}
	
	.word-btn--hover {
		background-color: #4ca2ff;
	}
	
	
	.swiper-box {
		height: 200px;
	}
	
	.swiper-item {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		justify-content: center;
		align-items: center;
		background-color: #999;
		color: #fff;
	}
	
	.swiper-box .image {
		width: 750rpx;
	}
	
	.active {
		border-style: solid;
		border-color: #007aff;
		border-width: 1px;
	}
	
	.uni-media-list-logo {
		width: 210upx;
		height: 180upx;
	}
	
	.uni-media-list-body {
		height: auto;
		justify-content: space-around;
	}
	
	.uni-media-list-text-top {
		height: 96upx;
		font-size: 36upx;
		overflow: hidden;
	}
	
	.uni-media-list-text-bottom {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}
	
</style>
